<include file="common/header" />
<style>
    #filePicker .webuploader-pick{
        text-align: left;
    }
</style>
<div class="main-container">
    <div class="container">
        <div class="row step-item mb15">
            <div class="col-xs-3 step step1">1.项目信息<i class="ui-icon ui-icon-total ui-icon-rightarrow"></i> </div>
            <div class="col-xs-3 step step2 current">2.回报设置<i class="ui-icon ui-icon-total ui-icon-rightarrow"></i> </div>
            <div class="col-xs-3 step step3">3.发起人信息<i class="ui-icon ui-icon-total ui-icon-rightarrow"></i> </div>
            <div class="col-xs-3 step step4">4.完成</div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-sm-12">
                <div class="left-main">
                    <h1 class="text-center f18 fb gain-main-title">回报设置</h1>
                    <div class="gain-table">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>回报</th>
                                    <th>支持金额</th>
                                    <th>名额</th>
                                    <th>回报内容</th>
                                    <th>回报时间</th>
                                    <th>运费</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <volist id="vo" name="deal_item_list">
                                    <tr>
                                        <td>{$i}</td>
                                        <td>{$vo.title}</td>
                                        <td>￥{$vo.price}</td>
                                        <td><if condition="($vo.is_limit_user eq 1)">{$vo.limit_user}名<else />不限</if></td>
                                        <td>
                                            {$vo.description}
                                        </td>
                                        <td>项目结束后{$vo.repaid_day}天</td>
                                        <td><if condition="($vo.is_delivery eq 1)"><if condition="($vo.delivery_fee eq 0.0000)">包邮<else />{$vo.delivery_fee}</if><else />不需快递</if></td>
                                        <td class="text-center">
                                            <button class="ui-btn ui-btn-red btn-gain-red del-payback mb10" key="{$vo.id}">删除&nbsp;<i class="ui-icon ui-icon-total ui-icon-del"></i> </button>
                                            <button class="ui-btn ui-btn-red btn-gain-red edit-payback mb10" key="{$vo.id}">编辑&nbsp;<i class="ui-icon ui-icon-total ui-icon-edit"></i> </button>
                                        </td>
                                    </tr>
                                </volist>
                            </table>
                        </div>

                    </div>
                    <div class="add-gain">
                        <button class="ui-btn ui-btn-blue btn-gain add_gain">+&nbsp;添加回报</button>
                    </div>
                    <div class="wrap-step">
                        <a class="ui-btn ui-btn-blue btn-create-red-next mr30 btn-create-next-left" onclick="window.location.href='/Project/edit/id/{$deal_item.id}'"><span  class="sign-btn-left">&lt</span><span class="text">上一步</span></a>
                        <a class="ui-btn ui-btn-blue btn-create-red-next" onclick="window.location.href='/Project/information/deal_id/{$deal_item.id}.html'"><span class="text">下一步</span><span class="sign-btn">&gt</span></a>
                    </div>
                </div>
                <div class="wrap-add-gain mt20">
                    <button class="ui-btn ui-btn-blue btn-close" onclick="add_gain('close')"><i class="glyphicon glyphicon-remove"></i></button>
                    <h1 class="text-center f18 fb mb30" id="payback-title">添加回报</h1>
                    <div class="gain-form">
                        <form class="ui-form" id="form-payback">
                            <div class="row">
                                <label class="col-xs-3">回报标题：</label>
                                <div class="col-xs-5">
                                    <div class="ipt">
                                        <input type="text" maxlength="20" placeholder="不能超过20个字" name="title">
                                        <input type="hidden" name="id" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">支付金额：</label>
                                <div class="col-xs-5">
                                    <div class="ipt">
                                        <input type="text" name="price" class="is_money">
                                    </div>
                                </div>
                                <div class="col-xs-1 unit">元</div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">回报内容：</label>
                                <div class="col-xs-8">
                                    <div class="wrap-textarea">
                                        <textarea id="gain-textarea" name="description" maxlength="200" placeholder="请填写关于回报或任何你希望项目发起人知道的信息，不多于200字。"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">添加图片：</label>
                                <input type="hidden" name="deal_id" value="{$deal_item.id}" class="deal_id">
                                <div id="box-img-val">

                                </div>
                                <div class="ipt col-sm-3 gain-add-img"  id="filePicker" style="text-align: left;">
                                    <img src="/images/home/add_img_default.png" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-7 col-xs-offset-3 f14 fc9">支持jpg、jpeg、png、gif格式，大小不超过500kb,最多上传4张。<span class="fc-red">建议尺寸1：1</span></div>
                            </div>
                            <div class="row">
                                <div class="col-xs-9 col-xs-offset-3 ipt" id="box-upload_img">
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">是否限购：</label>
                                <div class="form-radio col-xs-9">
                                    <div class="ipt">
                                        <div class="col-xs-6">
                                        <span class="ui-radio is_limit_user is_limit_user_1">
                                        <input type="radio" name="is_limit_user" value="1">
                                        </span>
                                            是
                                        </div>
                                        <div class="col-xs-6">
                                        <span class="ui-radio is_limit_user is_limit_user_2">
                                        <input type="radio" name="is_limit_user" value="0" checked>
                                        </span>
                                            否
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row limit_user" style="display: none">
                                <label class="col-xs-3">限定名额：</label>
                                <div class="col-xs-5">
                                    <div class="ipt">
                                        <input type="text" placeholder="“0”为不限名额" name="limit_user">
                                    </div>
                                </div>
                                <div class="col-xs-1 unit">个</div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">回报类型：</label>
                                <div class="form-radio col-xs-9">
                                    <div class="ipt">
                                        <div class="col-xs-6">
                            <span class="ui-radio repaid_type2">
                            <input type="radio" name="repaid_type"  value="0" checked>
                            </span>
                                            实物回报（需要快递/邮寄）
                                        </div>
                                        <div class="col-xs-6">
                            <span class="ui-radio repaid_type1">
                            <input type="radio" name="repaid_type" value="1">
                            </span>
                                            虚拟回报（不需要快递／邮寄的，电子照片等）
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">是否配送：</label>
                                <div class="form-radio col-xs-9">
                                    <div class="ipt">
                                        <div class="col-xs-6">
                                        <span class="ui-radio is_delivery is_delivery_1">
                                        <input type="radio" name="is_delivery" value="1">
                                        </span>
                                            是
                                        </div>
                                        <div class="col-xs-6">
                                        <span class="ui-radio is_delivery is_delivery_2">
                                        <input type="radio" name="is_delivery" value="0"  checked>
                                        </span>
                                            否
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row delivery_fee" style="display: none;">
                                <label class="col-xs-3">运费：</label>
                                <div class="col-xs-5">
                                    <div class="ipt">
                                        <input type="text" placeholder="“0”为不收运费" id="delivery_fee" name="delivery_fee" class="is_money">
                                    </div>
                                </div>
                                <div class="col-xs-1 unit">元</div>
                            </div>
                            <div class="row">
                                <label class="col-xs-3">项目回报时间：</label>
                                <div class="text-center pull-left col-xs-3" id="hui-time">项目结束后</div>
                                <div class="col-xs-3">
                                    <div class="ipt">
                                        <input type="text" name="repaid_day" class="is_num" placeholder="输入回报天数">
                                    </div>
                                </div>
                                <div class="col-xs-1 unit">天</div>
                            </div>
                            <div class="row">
                            <label class="col-xs-3">参加见面会：</label>
                            <div class="form-radio col-xs-9">
                            <div class="ipt">
                            <div class="col-xs-6">
                            <span class="ui-radio join_meet1">
                            <input type="radio" name="join_meet" value="1">
                            </span>
                            是
                            </div>
                            <div class="col-xs-6">
                            <span class="ui-radio join_meet2">
                            <input type="radio" name="join_meet" value="0" checked>
                            </span>
                            否
                            </div>
                            </div>
                            </div>
                            </div>
                            <div class="row ui-btn-group">
                                <a class="ui-btn ui-btn-disabled ui-btn-default mr30" onclick="add_gain('close')">取消</a>
                                <a class="ui-btn ui-btn-blue ui-btn-default" id="btn-add-item">保存</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 visible-lg">
                <div class="right-sidebar">
                    <div class="sidebar-top-bg">
                        <h1>温馨提示</h1>
                    </div>
                    <div class="sidebar-main">
                        <img src="/images/home/upload/sidebar_sum.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //    添加关闭回报
    function add_gain(status){
        if(status == 'close'){
            $(".add-gain,.wrap-step").show();
            $(".wrap-add-gain").hide();
            window.location.reload();
        }else{
            $(".add-gain,.wrap-step").hide();
            $(".wrap-add-gain").show();
        }
        upload();
    }
    function upload(){
        var uploader = WebUploader.create({
            auto: true,
            chunked: false,
            method: 'POST',
            disableGlobalDnd: true,
            fileNumLimit: 4,
            //fileSizeLimit: 1024000,
            swf: '/javascript/home/webuploader/Uploader.swf',
            server: '/Project/upload_image',
            pick: '#filePicker',
            accept: {
                title: '选择封面图片',
                extensions: 'gif,jpg,jpeg,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('uploadSuccess', function (file,response) {
            var i = $(document).find(".box-upload-img").length;
            if(i > 3)return false;
            var data = JSON.parse(response._raw);
            var r = data.result;
            var html ='<span class="box-upload-img"><div class="delete-img">x</div><img class="upload_image" style="width:100px;height:100px;"' +
                    ' src="'+ data.result + '?rand='+Math.random() +'">' +
                    '<input type="hidden" name="image[]" value="'+r+'" class="image"></span>';
            $(html).appendTo($("#box-upload_img"));
            i++;
//            $('input[name=image]').val(data.result);
            uploader.reset();
        });
    }
    function clearForm(formid){
        $(':input',formid)
                .not(':button, :submit, :reset, :hidden')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
        $(".ui-radio").removeClass('selected');
        $(".delivery_fee").hide();
        $(".limit_user").hide();
        for(var i =1;i<=4;i++){
            $('#upload_image'+i).hide().attr('src','');
            $(".image" + i).val('');
        }

    }
    $(function(){
        $(document).on('click','.delete-img',function(){
            $(this).parent().remove();
        })
        $(".repaid_type1").on('click',function(){
            $(".is_delivery_1").parent().hide();
            $(".is_delivery_2").trigger('click');
//            $(".wrap-voucher").show();
        });
        $(".repaid_type2").on('click',function(){
            $(".is_delivery_1").parent().show();
//            $(".wrap-voucher").hide();
        });
        $(".add_gain").on('click',function(){
            add_gain();
            $("#payback-title").text('添加回报');
            $('[name=id]').val('0');
        });
        $(".is_delivery").on('click',function(){
            var is_delivery = $(this).children('[name=is_delivery]').val();
            if(is_delivery == 1){
                $(".delivery_fee").show();
            }else{
                $("[name=delivery_fee]").val('');
                $(".delivery_fee").hide();
            }
        });
        $(".is_limit_user").on('click',function(){
            var is_limit_user = $(this).children('[name=is_limit_user]').val();
            if(is_limit_user == 1){
                $(".limit_user").show();
            }else{
                $("[name=limit_user]").val('');
                $(".limit_user").hide();
            }
        });
        $("#btn-add-item").on('click',function(){
            if($("[name=title]").val().length<=0){alert("请填写回报标题");return false;}
            if($("[name=price]").val().length<=0){alert("请填写支付金额");return false;}
            if($("#gain-textarea").val().length<=0){alert("请填写回报内容");return false;}
            if($("[name=repaid_day]").val().length<=0){alert("请填写项目回报时间");return false;}
            var db = $("#form-payback").serialize();
            $.post('/Project/save_deal_item',db,function(data){
                alert(data.info);
                if(data.status > 0){
                    window.location.reload();
                }
            },'json')
        });
        $(".del-payback").on('click',function(){
            var _key = $(this).attr('key');
            var r=confirm("您确定删除该选项吗？");
            if (r==true)
            {
                $.post('/Project/del_item',{id:_key},function(json){
                    alert(json.info);
                    if(json.status== 1){
                        window.location.reload();
                    }
                },'json')
            }
        });
        $(".edit-payback").on('click',function(){
            add_gain();
            clearForm("#form-payback");
            var id=$(this).attr('key');
            $("#payback-title").text('编辑回报');
            $('[name=id]').val(id);
            $.post('/Project/edit_item',{id:id},function(json){
                $('[name=title]').val(json.info.title).next('span').remove();
                $('[name=price]').val(json.info.price).next('span').remove();
                $('[name=description]').val(json.info.description).next('span').remove();
                $('[name=repaid_day]').val(json.info.repaid_day).next('span').remove();
                if(json.info.is_limit_user == 1){
                    $('.is_limit_user_1').addClass('selected').children().prop('checked','true');
                    $(".limit_user").show();
                    $('[name=limit_user]').val(json.info.limit_user).next('span').remove();
                }else{
                    $('.is_limit_user_2').addClass('selected').children().prop('checked','true');
                    $('[name=limit_user]').val('');
                }
                if(json.info.is_delivery == 1){
                    $('.is_delivery_1').addClass('selected').children().prop('checked','true');
                    $(".delivery_fee").show();
                    $('[name=delivery_fee]').val(json.info.delivery_fee).next('span').remove();
                }else{
                    $('.is_delivery_2').addClass('selected').children().prop('checked','true');
                    $('[name=delivery_fee]').val('');
                }
                if(json.info.voucher == 1){
                    $('.voucher1').addClass('selected').children().prop('checked','true');
                }else{
                    $('.voucher2').addClass('selected').children().prop('checked','true');
                }
                if(json.info.repaid_type == 1){
                    $('.repaid_type1').addClass('selected').children().prop('checked','true');
                    $(".is_delivery_1").parent().hide()
                }else{
                    $('.repaid_type2').addClass('selected').children().prop('checked','true');
                }
                if(json.info.join_meet == 1){
                    $('.join_meet1').addClass('selected').children().prop('checked','true');
                }else{
                    $('.join_meet2').addClass('selected').children().prop('checked','true');
                }
                if(json.info.image != null){
                    for (var i = 0;i<json.info.image.length;i++){
                        var r = json.info.image[i].image;
                        var html ='<span class="box-upload-img"><div class="delete-img">x</div> <img class="upload_image" style="width:100px;height:100px;"' +
                                ' src="'+ json.info.image[i].image + '?rand='+Math.random() +'">' +
                                '<input type="hidden" name="image[]" value="'+r+'" class="image"></span>';
                        $(html).appendTo($("#box-upload_img"));
                    }
                }
            },'json')
        })
    })
</script>
<include file="common/footer" />